<!-- 我的 -->
<template>
    <view>
		<!-- 自定义组件，slot内容上方加系统状态栏 -->
		<statusBar :height="'240rpx'">
			<view class="flex flex-row-reverse" style="height: 44px;">
				<!-- “设置”图标 -->
				<view class="flex justify-center text-white font-weight-bolder "
				 hover-class="gray-click" style="width: 78rpx;height: 42rpx;">
					<view class="iconfont icon-shezhi font-lg"></view>
				</view>
				<!-- “消息”图标 -->
				<view class="flex justify-center text-white font-weight-bolder"
				 hover-class="gray-click" style="width: 78rpx;height: 42rpx;">
					<view class="iconfont icon-xiaoxi font-lg"></view>
				</view>
			</view>
		
			<view class="main-bg-color flex align-center" style="height: 160rpx;">
				<view class="w-100 flex" style="height: 110rpx;">
					<!-- 图片区域 -->
					<view class="bg-white mx-1d5 rounded-circle p" style="width: 120rpx;height: 100%;">
						<image class="w-100 h-100 rounded-circle" src="../../static/demo/headPortrait/0.jpg" mode="scaleToFill"></image>
					</view>

					<!-- 资料区域 -->
					<view style="width: 466rpx;height: 100%;">
						<!-- 用户名 -->
						<view class="w-100 flex align-center" style="height: 42rpx;">
							<text class="text-white">mingo0O</text>
						</view>
						<!-- 会员信息 -->
						<view class="flex align-center w-100 " style="height: 42rpx;">
							<!-- <view class="flex align-center " style="height: 25rpx;">
								
							</view> -->
							<text
							class="text-white border-m rounded-m font-m font-weight-normal px-0d8"
							style="height: 25rpx;color: #FFE4EF;line-height: 1.5;">
								大会员
							</text>
							
						</view>
						<!-- 储币信息 -->
						<view class="flex align-center w-100 font-weight-light" style="height: 36rpx;color: #FEDEE7;">
							<text class="flex align-center font-sm">
								B币: 10万
							</text>
							<text class="flex align-center font-sm ml-4">
								硬币: 206
							</text>
						</view>
					</view>

					<!-- “空间”区域 -->
					<view class="font-weight-light flex align-center justify-center" style="width: 134rpx;height: 120rpx;color: #FEDEE7;">
						<view class="flex align-center font-sm">
							<text style="line-height: 1.5;">空间</text>
							<view class="iconfont icon-gengduo ml-1"></view>
						</view>
					</view>
				</view>
			</view>
		</statusBar>

		<!-- 分界线 -->
		<view class="divid-line-20"></view>

		<!-- 自定义组件（我的作品 - 收藏 - 关注 - 历史记录） -->
		<fList  v-for="(item,index) in list"  @click=jumpToPage(item.pageName) :item="item" :key="index"></fList>

		<!-- 分界线 -->
		<view class="divid-line-20"></view>

		<!-- 自定义组件 -->
		<mainBigButton :text="'立即投稿'" @click="open"></mainBigButton>
		
		<!-- 遮罩层 -->
		<u-mask :show="show" @click="hide" :zoom="false"></u-mask>
		
		<!-- 加入底部向上的弹出动画 -->
		<!-- 这里z-index设为10071是因为遮罩层的z-index是10070 -->
		<!-- animate动画在安卓端设置的duration无效 但animate__faster有效 参考网址：https://www.frbkw.com/1987/ -->
		<!-- #ifdef -->
		
		<!-- #endif -->
		<view v-if="show"
		 class="position-absolute bottom-0 bg-white "
		 :class="getSystemInfo() ? 'animate-init animate__animated animate__fadeInUp animate__faster' : ''"
		 style="z-index: 10071;">
			<!-- 单集、连载按钮 -->
			<view class="flex" style="height: 200rpx;">
				<view class="flex justify-center align-center" style="width: 375rpx;" @click="jumpToPage('publish')">
					<view style="width: 85rpx;height: 135rpx;">
						<view class="iconfont icon-dingdanwenjian rounded-circle text-white flex align-center justify-center"
						      style="height: 85rpx;background-color: #157FFB;">
					    </view>
						<view class="flex justify-center" style="height: 50rpx;color: #747C83;">单集</view>
					</view>
				</view>
				
				<view class="flex justify-center align-center" style="width: 375rpx;" @click="jumpToPage('publish')">
					<view style="width: 85rpx;height: 135rpx;">
						<view class="iconfont icon-918caidan_wenjian rounded-circle text-white  flex align-center justify-center"
							  style="height: 85rpx;background-color: #F87499">
						</view>
						<view class="flex justify-center" style="height: 50rpx;color: #747C83;">连载</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="divid-line-20"></view>
			<!-- 取消栏 -->
			<text class="safe flex align-center justify-center" @click="hide">取消</text>
		</view>
		
		
		<u-tabbar v-model="current" :list="tabbarList" :inactive-color="'#333C4E'" :active-color="'#f9749a'"></u-tabbar>
    </view>
</template>

<script>
	import statusBar from '@/components/common/statusBar.vue'
	import fList from '@/components/common/f-list-item.vue'
	import mainBigButton from '@/components/common/main-big-button.vue'
	import cateIcon from '@/components/common/cate-icon.vue'
    export default {
		// 注册自定义组件
		components:{
			fList,
			mainBigButton,
			statusBar,
			cateIcon
		},
        data() {
            return {
				timer:'',
				list:[
					{
						title:'我的作品',
						text:'26个',
						enable:false,
						icon:'icon-dianyingshipin',
						pageName:'user-video'
					},
					{
						title:'收藏',
						text:'',
						enable:true,
						icon:'icon-shoucang',
						pageName:'shoucang'
					},
					{
						title:'关注',
						text:'365',
						enable:false,
						icon:'icon-gz',
						pageName:'guanzhu'
					},
					{
						title:'历史记录',
						text:'',
						enable:true,
						icon:'icon-lishijilu',
						pageName:'lishijilu'
					},
				],
				addMsgBool:false,
				// 控制遮罩层的显示与否
				show: false,
				content: '东临碣石，以观沧海',
				tougaoIcon:[
					{
						src: '/static/demo/cate/1.png',
						name: '番剧'
					},
					{
						src: '/static/demo/cate/1.png',
						name: '国创'
					},
				],
				// 当前滑块的索引
				cur: 0,
				current:0,
				tabbarList: [{
					// 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
					// 或者png图标的【绝对路径】，建议尺寸为80px * 80px
					// 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
					iconPath: "/static/tabbar/find.png",
					// 激活(选中)的图标，同上
					selectedIconPath: "/static/tabbar/findSelected.png",
					// 显示的提示文字
					text: '首页',
					// 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
					count: 0,
					// 如果配置此值为true，那么角标将会以红点的形式显示
					isDot: false,
					// 如果使用自定义扩展的图标库字体，需配置此值为true
					// 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
					customIcon: false,
					// 如果是凸起按钮项，需配置此值为true
					midButton: false,
					// 点击某一个item时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径
					pagePath: '/pages/index/index', // 1.5.6新增，路径需要以"/"开头
				},
				{
					iconPath: "/static/tabbar/class.png",
					selectedIconPath: "/static/tabbar/classSelected.png",
					text: '分类',
					count: 0,
					isDot: false,
					customIcon: false,
					midButton: false,
					pagePath: '/pages/class/class',
				},
				{
					iconPath: "/static/tabbar/my.png",
					selectedIconPath: "/static/tabbar/mySelected.png",
					text: '我的',
					count: 0,
					isDot: false,
					customIcon: false,
					midButton: false,
					pagePath: '/pages/my/my',
				}]
			}
        },
        methods: {
			open() {
				this.show = true
			},
			// 隐藏遮罩层
			hide() {
				this.show = false
			},
			// 跳转到发布页面 jumpToPublishPage
			jumpToPage(path) {
				// 启用定时器，500毫秒后隐藏弹窗
				this.timer = setTimeout(this.hide, 500)
				uni.navigateTo({
					// 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数
					url: '../' + path + '/' +  path,
					// // 接口调用成功的回调函数
					// success : res => {},
					// // 接口调用失败的回调函数
					// fail: () => {},
					// // 接口调用结束的回调函数（调用成功、失败都会执行
					// complete:() => {}
				})
			},
			beforeDestroy() {
				clearTimeout(this.timer);
			},
			getSystemInfo(){
				return uni.getSystemInfoSync().platform !== 'android'
			}
		}
    }
</script>

<style lang="scss"> 
	// .animate__animated.animate__fadeInUp {
	//   --animate-duration: 0.1s;
	// }
</style>
